<template>
  <div class="container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1}}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="title" label="轮播图标题" width="120"/>

      <el-table-column label="轮播图" align="center" width="400">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" alt="轮播图" style="width: 120px">
        </template>
      </el-table-column>

      <el-table-column prop="linkUrl" label="对应链接地址"  align="center"/>

      <el-table-column align="center" label="操作" width="300">

        <template slot-scope="scope">
            <!--  TODO 编辑功能   -->
            <el-button type="primary" size="mini" icon="el-icon-edit" style="margin:4px auto;width: 140px">编辑 TODO</el-button>

          <el-popconfirm title="确定要删除吗？" @onConfirm="deleteCourse(scope.row.id)">
            <el-button
              slot="reference" type="danger" size="mini"
              icon="el-icon-delete" style="margin:2px auto;width: 140px"
            > 删除
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <!--  TODO 添加功能   -->
    <el-button type="text"  style="height: 80px;float: right;margin-right: 100px">添加轮播图<i class="el-icon-d-arrow-right"></i></el-button>

    <!-- 分页条 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="limit"
      :current-page="page"
      style="padding: 30px 0;text-align: center"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>


  import banner from '@/api/edu/banner'

  export default {
    name: 'Dashboard',
    data() {
      return {
        page: 1, // 当前页面
        limit: 4, // 每页条数
        total: 0, // 总记录数
        list: null, // 查询接口后，返回的数据
        listLoading: true// 表格加载页
      }
    },
    methods: {
      // 获取数据
      getList(page = 1) {
        this.listLoading = true
        banner.getBannerList(this.page = page, this.limit)
          .then(res => {
            this.list = res.data.items
            this.total = res.data.total
            this.listLoading = false
          }).catch(err => this.listLoading = false)
      },
      // 删除轮播图
      deleteCourse(id) {
        banner.deleteBannerById(id)
          .then(res => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
